<template>
	<div>
		<div class='indBox'>
			<!--用电数据，能耗占比-->
			<div class="box abxo2">
				<div class="flexOne">
					<el-card>
						<div class="echOne">用电数据</div>
						<div class="echCom">
							<p>能耗：
								<el-select v-model="value" style="width: 110px">
									<el-option
										v-for="item in options"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</el-select>
							</p>
							<div class="ms">
								<p>当年（去年）<span class="pFont">2,560,080</span><span class="ps">(2,235,080)</span></p>
								<p>当月（去年同月）<span class="pFont">123,080</span> <span class="ps">(1,080)</span></p>
							</div>
							<p>当日（昨日）<span class="pFont">500</span><span class="ps">(500)</span></p>
							<div class="gl">
								<p>功率 <span style="margin-left: 15px">kw</span></p>
								<div class="end">
									<p>实时 <span class="pFont">32</span></p>
									<p>历史最高 <span class="pFont">136</span><span class="ps">(时间：<span
										class="pt">22-01-12</span>)</span>
									</p>
									<p>本年最高 <span class="pFont">64</span><span class="ps">(时间：<span
										class="pt">22-01-12</span>)</span>
									</p>
								</div>
							</div>
						</div>
						<div class="tt">
							<el-select v-model="select" placeholder="Select" style="width: 115px">
								<el-option label="总体" value="总体"/>
							</el-select>

							<el-select v-model="value1" placeholder="Select" style="width: 115px">
								<el-option label="kWh" value="kWh"/>
								<el-option label="RMB" value="RMB"/>
								<el-option label="tce" value="tce"/>
								<el-option label="kgco²" value="kgco²"/>
							</el-select>

							<el-date-picker
								v-model="time"
								type="daterange"
								range-separator="至"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								style="margin: 0 20px"
							/>
						</div>
						<div id="main" style='height: 300px'></div>
					</el-card>
				</div>
				<div class="flexTwo">
					<el-card style="height: 100%">
						<div class="echOne">能耗占比</div>
						<div class="two">
							<div id="two" style='height: 250px'></div>
							<div class="input_t">
								<el-date-picker
									v-model="time1"
									type="daterange"
									range-separator="至"
									start-placeholder="开始时间"
									end-placeholder="结束时间"
									style="width:250px;margin: 0 20px;"
								/>
							</div>
						</div>
						<div style="display: flex">
							<div class="threeBox">
								<div id="three" style='height: 310px'></div>
								<div class="qn">去年</div>
								<div class="sy">上月</div>
							</div>
						</div>
					</el-card>
				</div>
			</div>

			<!--碳排放，用能强度-->
			<div class="box abxo2">
				<div class="flexOne">
					<el-card>
						<div class="echOne">碳排放</div>
						<div class="tpf">
							<div class="tpf1">
								<div class="tf1">
									<div>
										<div>
											碳中和成本
										</div>
										<div>
											<span>30,000</span>RMB/年
										</div>
									</div>
									<div>
										<div>
											购买绿色成本
										</div>
										<div>
											<span>30,000</span>RMB/年
										</div>
									</div>
								</div>
							</div>
							<div class="tpf2">
								<div id="four" style='height: 250px'></div>
							</div>
						</div>
					</el-card>
				</div>
				<div class="flexTwo">
					<el-card style="height: 309px">
						<div class="echOne" style="display: flex;justify-content: space-between;align-items: center">
							用能强度
							<el-select v-model="select1" style="width: 115px">
								<el-option label="kWh/m²" value="kWh/m²"/>
								<el-option label="RMB/m²" value="RMB/m²"/>
								<el-option label="tce/m²" value="tce/m²"/>
							</el-select>
						</div>
						<div>
							<div id="five" style='height: 240px'></div>
						</div>

					</el-card>
				</div>
			</div>
		</div>
		<!--用电平衡-->
		<div class="box_two">
			<el-card>
				<div class="echOne">用电平衡</div>
				<div class="zz">
					<div class="tpf1" style='margin-left:30px'>
						<div class="tf1">
							<div>
								<div>
									区域总电耗（过去一年累计）
								</div>
								<div>
									<span>2,560,080</span>kWh
								</div>
							</div>

							<div>
								<div>
									区域分项电耗加总（过去一年累计）
								</div>

								<div>
									<span>123,080</span>kWh
								</div>
							</div>
						</div>
					</div>
					<div class="b">
						<div class="c">
							<el-date-picker
								v-model="time"
								type="daterange"
								range-separator="至"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								style="margin: 0 20px"
							/>
						</div>
						<div id="six" style='height: 250px'></div>
					</div>
				</div>
			</el-card>
		</div>
		<!--燃气数据-->
		<div class="box_two">
			<el-card>
				<div class="echOne">燃气数据</div>
				<div class="zz">
					<div class="asss">
						<div class="end_font">
							<div>
								<div></div>
								<div>
									燃气：
									<el-select v-model="select2" placeholder="请选择" style="width: 115px" size='small'>
										<el-option label="m²" value="m²"/>
										<el-option label="RMB" value="RMB"/>
										<el-option label="tce" value="tce"/>
										<el-option label="kgco²" value="kgco²"/>
									</el-select>
								</div>

							</div>

							<div>
								<div>
									当年（去年）
								</div>
								<div>
									<span class="spanOne m">2,560,080</span><span class="spanTwo">（2,235,080）</span>
								</div>
							</div>

							<div>
								<div>
									当月（去年同月）
								</div>

								<div>
									<span class="spanOne n">123,080</span> <span class="spanTwo">（1,080）</span>
								</div>
							</div>

							<div>
								<div>
									当日（昨日）
								</div>
								<div>
									<span class="spanOne v">580</span><span class="spanTwo">（500）</span>
								</div>
							</div>
						</div>
					</div>
					<div class="b">
						<div class="c">
							<el-select v-model="end_value" placeholder="Select" style="width: 115px">
								<el-option label="总体" value="总体"/>
							</el-select>

							<el-select v-model="end_select" placeholder="Select" style="width: 115px">
								<el-option label="m²" value="m²"/>
							</el-select>

							<el-date-picker
								v-model="time2"
								type="daterange"
								range-separator="至"
								start-placeholder="开始时间"
								end-placeholder="结束时间"
								style="margin: 0 20px"
							/>
						</div>
						<div id="seven" style='height: 250px'></div>
					</div>
				</div>
			</el-card>
		</div>
	</div>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import * as echarts from 'echarts';

const value = ref('kWh')
const value1 = ref('kWh')
const select = ref('总体')
const time = ref('')

const time1 = ref('')
const time2 = ref('')
const select1 = ref('kWh/m²')
const select2 = ref('m²')
const end_value = ref('总体')
const end_select = ref('m²')

const options = [
	{
		value: 'kWh',
		label: 'kWh',
	},
	{
		value: 'RMB',
		label: 'RMB',
	},
	{
		value: 'tce',
		label: 'tce',
	},
	{
		value: 'kgco²',
		label: 'kgco²',
	},
]
onMounted(() => {
	// 获取DOM元素并且进行初始化
	let myChart = echarts.init(document.getElementById('main'));
	let chartDom = echarts.init(document.getElementById('two'));
	let chartDom3 = echarts.init(document.getElementById('three'));
	let chartDom4 = echarts.init(document.getElementById('four'));
	let chartDom5 = echarts.init(document.getElementById('five'));
	let chartDom6 = echarts.init(document.getElementById('six'));
	let chartDom7 = echarts.init(document.getElementById('seven'));
	// 创建图表
	myChart.setOption(
		{
			xAxis: {
				name: '日',
				data: ['4/20', '4/21', '4/22', '4/23', '4/24', '4/25', '4/26', '4/27', '4/28', '4/29']
			},
			yAxis: {
				name: '能耗',
				type: 'value',
				axisLine: {
					// x轴线隐藏，但不隐藏背景线
					show: true,
				},
			},
			tooltip: {
				trigger: 'axis',
			},
			series: [
				{
					data: [9, 6, 5, 7, 3, 12, 10, 2, 6, 10],
					type: 'line',
					areaStyle: {
						color: '#f6f7f7',
					},
					color: '#dddddd'
				},
				{
					data: [2, 6, 10, 11, 6, 3, 11, 2, 8, 3],
					type: 'line',
					areaStyle: {
						color: '#fdf5ce',
						opacity: 0.5
					},
					color: '#ffc40f'
				}
			]
		}
	);
	chartDom.setOption(
		{
			legend: {
				data: ['制冷机', '冷却水泵', '冷冻水泵', '冷却塔风机', '热水泵'],
				left: 200,
				top: 15,
				itemWidth: 15,
				itemHeight: 1
			},
			xAxis: {
				name: '日',
				// boundaryGap: true,
				data: ['4/20', '4/21', '4/22', '4/23', '4/24', '4/25', '4/26', '4/27', '4/28', '4/29']
			},
			yAxis: {
				name: '%',
				type: 'value',
				axisLine: {
					// x轴线隐藏，但不隐藏背景线
					show: true,
				},
			},
			tooltip: {
				trigger: 'axis',
			},
			series: [
				{
					name: '制冷机',
					type: 'line',
					stack: 'Total',
					data: [12, 32, 11, 34, 20, 30, 10, 15, 31, 35],
					color: '#D90909'
				},
				{
					name: '冷却水泵',
					type: 'line',
					stack: 'Total',
					data: [22, 18, 11, 24, 29, 33, 30, 32, 11, 34],
					color: '#FFC40F'
				},
				{
					name: '冷冻水泵',
					type: 'line',
					stack: 'Total',
					data: [15, 22, 21, 14, 19, 30, 10, 15, 16, 20],
					color: '#e2e3e3'
				},
				{
					name: '冷却塔风机',
					type: 'line',
					stack: 'Total',
					data: [20, 22, 12, 14, 19, 13, 20, 21, 15, 16],
					color: '#A7DDFF'
				},
				{
					name: '热水泵',
					type: 'line',
					stack: 'Total',
					data: [14, 22, 12, 20, 10, 19, 20, 11, 10, 16],
				},
			]
		}
	);
	chartDom3.setOption(
		{
			tooltip: {
				trigger: 'item',
				formatter: "{b}({d}%)" /*饼状图触碰之后显示的注释文字*/,
			},
			legend: {
				bottom: '0',
			},
			series: [
				{
					type: 'pie',
					center: ['25%', '50%'],
					radius: [40, 75],
					itemStyle: {
						borderRadius: 10,
						borderColor: '#fff',
						borderWidth: 2
					},
					label: {
						fontSize: '15',
						color: 'inherit',
						formatter: `{b}{d}%` /*饼状图触碰之后显示的注释文字*/,
					},
					data: [
						{value: 10, name: '冷机'},
						{value: 10, name: '冷冻泵'},
						{value: 10, name: '冷却塔'},
						{value: 10, name: '冷却泵'},
						{value: 15, name: '热水泵'},
					],
					color: ['#0BA8EE', '#05C1F1', '#15B6CB', '#5E9FC2', '#A7DDFF'],

				},
				{
					type: 'pie',
					radius: [45, 75],
					center: ['75%', '50%'],
					itemStyle: {
						borderRadius: 10,
						borderColor: '#fff',
						borderWidth: 2
					},
					label: {
						fontSize: '15',
						color: 'inherit',
						formatter: `{b}{d}%` /*饼状图触碰之后显示的注释文字*/,
					},
					data: [
						{value: 10, name: '冷机'},
						{value: 10, name: '冷冻泵'},
						{value: 10, name: '冷却塔'},
						{value: 10, name: '冷却泵'},
						{value: 15, name: '热水泵'},
					],
					color: ['#0BA8EE', '#05C1F1', '#15B6CB', '#5E9FC2', '#A7DDFF']
				}
			]
		}
	);
	chartDom4.setOption(
		{
			tooltip: {
				trigger: 'axis',
			},
			grid: {
				left: '3%',
				right: '7%',
				bottom: '3%',
				containLabel: true
			},
			legend: {
				top: 20,
				right: 40,
				itemHeight: 1,
				itemWidth: 15
			},
			xAxis: [
				{
					type: 'category',
					name: '年',
					data: ['2019', '2020', '2021'],
				}
			],
			yAxis: [
				{
					name: 'K RMB',
					type: 'value',
					axisLine: {
						// x轴线隐藏，但不隐藏背景线
						show: true,
					},
				}
			],
			series: [
				{
					type: 'bar',
					barGap: 0,
					data: [200, 130, 220],
					color: '#d6ebfa'
				},
				{
					type: 'line',
					name: '可比建筑',
					symbol: 'none',
					lineStyle: {
						width: 3,
						color: '#D90909'
					},
					data: [200, 200, 200],
				},
				{
					type: 'line',
					name: '本地标准',
					symbol: 'none',
					lineStyle: {
						width: 3,
						color: '#FFC40F'
					},
					data: [170, 170, 170],
				},


			]
		}
	);
	chartDom5.setOption(
		{
			legend: [
				{
					orient: 'vertical',
					right: 20,
					top: 'center',
					itemWidth: 15,
					data: ['截止昨天前1年能耗', '实际能耗', '能耗预算', '类似建筑',]
				},
				{
					orient: 'vertical',
					right: 75,
					bottom: '30',
					itemWidth: 15,
					itemHeight: 1,
					data: ['本地强制', '本地先进']
				},

			],
			tooltip: {
				trigger: 'axis',
			},
			grid: {
				left: '3%',
				right: '30%',
				bottom: '3%',
				containLabel: true
			},
			dataset: {
				source: [
					['product', '实际能耗', '能耗预算', '类似建筑', '截止昨天前1年能耗', '本地强制', '本地先进'],
					['2019', 200, 150, 30, 0, 200, 150],
					['2020', 100, 150, 55.1, 0, 200, 150],
					['2021', 220, 210, 82.5, 0, 200, 150],
					['2022', 0, 0, 0, 100, 200, 150]
				]
			},
			xAxis: {type: 'category', name: '年'},
			yAxis: {
				name: 'RMB/m²', axisLine: {
					// x轴线隐藏，但不隐藏背景线
					show: true,
				},
			},
			series: [
				{type: 'bar', barGap: 0, color: '#F79646'},
				{type: 'bar', color: '#d6ebfa'},
				{type: 'bar', color: '#0070c0'},
				{type: 'bar', color: '#92d050'},
				{
					type: 'line', symbol: 'none',
					lineStyle: {
						width: 3,
						color: '#FFC40F'
					},
				},
				{
					type: 'line',
					symbol: 'none',
					lineStyle: {
						width: 3,
						color: '#64cc93'
					},
				},
			]
		}
	);
	chartDom6.setOption(
		{
			xAxis: {
				name: '日',
				data: ['4/20', '4/21', '4/22', '4/23', '4/24', '4/25', '4/26', '4/27', '4/28', '4/29']
			},
			yAxis: {
				name: 'kWh',
				type: 'value',
				axisLine: {
					// x轴线隐藏，但不隐藏背景线
					show: true,
				},
			},
			grid: {
				left: '3%',
				right: '5%',
				bottom: '10%',
				containLabel: true
			},
			tooltip: {
				trigger: 'axis',
			},
			series: [
				{
					data: [9, 6, 5, 7, 3, 12, 10, 2, 6, 10],
					type: 'line',
					areaStyle: {
						color: '#f6f7f7',
					},
					color: '#dddddd'
				},
				{
					data: [2, 6, 10, 11, 6, 3, 11, 2, 8, 3],
					type: 'line',
					areaStyle: {
						color: '#fdf5ce',
						opacity: 0.5
					},
					color: '#ffc40f'
				}
			]
		}
	);
	chartDom7.setOption(
		{
			xAxis: {
				name: '日',
				data: ['4/20', '4/21', '4/22', '4/23', '4/24', '4/25', '4/26', '4/27', '4/28', '4/29']
			},
			yAxis: {
				name: '能耗',
				type: 'value',
				axisLine: {
					// x轴线隐藏，但不隐藏背景线
					show: true,
				},
			},
			grid: {
				left: '3%',
				right: '5%',
				bottom: '10%',
				containLabel: true
			},
			tooltip: {
				trigger: 'axis',
			},
			series: [
				{
					data: [9, 6, 5, 7, 3, 12, 10, 2, 6, 10],
					type: 'line',
					areaStyle: {
						color: '#f6f7f7',
					},
					color: '#dddddd'
				},
				{
					data: [2, 6, 10, 11, 6, 3, 11, 2, 8, 3],
					type: 'line',
					areaStyle: {
						color: '#fdf5ce',
						opacity: 0.5
					},
					color: '#ffc40f'
				}
			]
		}
	);
})

</script>

<style lang="scss" scoped>
.indBox {
	display: grid;
	grid-template-rows: 1fr;
	grid-template-columns: 1fr;
	row-gap: 10px;

	.abxo2 {
		display: grid;
		grid-template-rows: 1fr;
		grid-template-columns: 1fr 1fr;
		column-gap: 10px;
	}

}

:deep( .el-card__body) {
	padding: 0;
}

.box {
	display: flex;

	.flexOne {
		flex: 1;

		.echOne {
			padding: 15px 20px;
			font-size: 20px;
			color: #6d83b7;
			font-weight: 600;
			border-bottom: 3px solid #f3f5f9;
		}

		.echCom {
			padding: 0 20px;
			margin: 10px 0;

			p {
				margin: 10px 0;
				font-size: 15px;
				color: #90979e;

				.pFont {
					font-size: 24px;
					color: #7695d1;
					margin: 0 10px 0 20px;
				}

				.ps {
					font-size: 10px;
				}
			}

			.ms {
				display: flex;
				justify-content: space-between;
			}

			.gl {
				margin-top: 35px;

				.end {
					display: flex;
					justify-content: space-between;

					.pt {
						color: #7695d1;
					}
				}
			}
		}

		.tt {
			display: flex;
			justify-content: right;
			align-items: center;

			.el-select {
				margin: 0 10px;
			}
		}

	}

	.flexTwo {
		flex: 1;

		.echOne {
			padding: 15px 20px;
			font-size: 20px;
			color: #6d83b7;
			font-weight: 600;
			border-bottom: 3px solid #f3f5f9;
		}

		.two {
			text-align: right;
			margin-top: 10px;
			position: relative;

			.input_t {
				position: absolute;
				top: 10px;
				right: 10px;
			}
		}

		.threeBox {
			flex: 1;
			position: relative;

			.qn {
				position: absolute;
				top: 3%;
				left: 5%;
				color: #b1c2d1;
				font-size: 15px;
			}

			.sy {
				position: absolute;
				top: 3%;
				left: 55%;
				color: #b1c2d1;
				font-size: 15px;
			}
		}

	}
}

.tpf1 {
	flex: 1;
	margin-left: 10px;

	.tf1 {
		font-size: 14px;
		color: #87928f;
		height: 100%;
		display: flex;
		flex-direction: column;
		justify-content: flex-end;
		width: 100%;
		align-items: flex-end;
		padding-bottom: 10px;
		color: #7E7E7E;

		& > div {
			width: 100%;
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px;

			& > div:first-child {
				color: #101010;
			}

			& > div:last-child {
				font-size: 12px;
			}

			span {
				color: #277BCB;
				font-size: 18px;
			}
		}
	}
}

.tpf {
	display: flex;

	.tpf2 {
		flex: 2;
	}
}

.box_two {
	margin-top: 18px;

	.echOne {
		padding: 15px 20px;
		font-size: 20px;
		color: #6d83b7;
		font-weight: 600;
		border-bottom: 3px solid #f3f5f9;
	}

	.zz {
		display: flex;

		.a {
			font-size: 15px;
		}

		.b {
			flex: 2;

			.c {
				text-align: right;
				margin-top: 10px;

				.el-select {
					margin: 0 10px;
				}
			}
		}
	}
}

.asss {
	width: 33%;
	padding: 0 50px 30px;
}

.end_font {
	width: 100%;
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	font-size: 14px;
	color: #7E7E7E;

	div:first-child {
		justify-content: flex-end !important;
	}

	& > div {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-top: 18px;

		div:first-child {
			flex: 1
		}

		div:last-child {
			flex: 0.9;
		}

		.spanOne {
			color: #277BCB;
			font-size: 18px;
		}

	}
}
</style>
